<template>
  <div class="page">
    <section>
      <div>store 使用:</div>
      <div>点击次数{{ clickNum }}</div>
      <div @click="addClickNum">点击</div>
    </section>
    <section>
      <div>变量本本地存储 使用:</div>

      <div @click="setLocal">设置本地存储test</div>
    </section>
    <section>
      <div>watch 使用:</div>
      <div>{{ num }}</div>
      <div @click="setNum">修改num</div>
    </section>
    <section>
      <div>路由 使用:</div>
      <div @click="jump">跳转</div>
    </section>
    <section>
      <div>服务请求 $http 使用:</div>
      <div @click="postTest">post请求</div>
    </section>
  </div>
</template>

<script setup>
import {
  
  defineComponent,
  onMounted,
  getCurrentInstance,
  onUnmounted,
  computed,
  watch,
  reactive,
  ref,
} from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";

let a = {
  value: 1,
};
a.value = 3;

// 全局变量获取
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http } = globalProperties;
// store 获取
const store = useStore();
//router 使用
const router = useRouter();
const route = useRoute();
// 挂载生命周期
onMounted(() => {});
onUnmounted(() => {
  getTest();
});

/* store 使用案例 */
const clickNum = computed(() => {
  return store.state.demo.clickNum;
});
const addClickNum = () => {
  store.dispatch("demo/updateClickNum", 1);
};

/* 全局变量本本地存储的使用 */
const setLocal = () => {
  return $storage.local.set("test", 1111);
};

/* 监听watch */
let num = ref(1);
watch(num, (news) => {
  console.log(news);
});
const setNum = () => {
  num.value++;
};

/* 路由  router*/
console.log(route);
const jump = () => {
  router.push({
    name: "ui",
    query: {
      ...route.query,
    },
  });
};
/* $http */
const getTest = async () => {
  let res = await $http.get({
    url: "http://gg.teamtourism.top/home/login/aa?a=1",
  });
  console.log(res);
};
const postTest = async () => {
  $http
    .post({
      url: "http://gg.teamtourism.top/home/login/aa",
    })
    .then((res) => {
      console.log(res);
    });
};
$http.post({
  url: "http://gg.teamtourism.top/home/login/aa",
});
</script>

<style scoped lang="scss">
.page {
  background-color: #f4f4f4;
}
</style>
